<template>
	<div class="notice">
	  <div class="loading" v-if="status === 'loading'">
	  	<v-loading></v-loading>
	  </div>
		<!--有通知提醒消息-->
		<div v-if="status === 'complete'">
			<section class="item" v-for="item in contents">
				<div class="detail" v-html="item.content">
          <!--<div ></div>-->
        </div>
				<div class="time">{{ item.create_time*1000 | date }}</div>
			</section>
			<v-pager :page-num='pageNum' :activeIndex="activeIndex" :total="total" @change-page="messageChangePage" class="pager"></v-pager>
		</div>
		<!--无通知提醒消息-->
		<div class="personal-activity-null" v-if="status === 'null'">
			<div class="personal-activity-null-illustration"></div>
			<div class="personal-activity-null-text">
				{{ $t('message.noMessageInfo') }}
			</div>
		</div>
	</div>
</template>

<script>
import VLoading from '@/components/base/VLoading'
import VPager from '@/components/base/VPager'
import { getCookie, delCookie } from '@/util/util'
export default {
  name: 'PersonalMessageNotice',
  components: {
    VLoading,
    VPager
  },
  data () {
    return {
      status: 'loading',
      contents: [],
      pageNum: 1,
      activeIndex: 1,
      total: 0
    }
  },
  computed: {
    type () {
      if (window.lang === 'cn') {
        return 1
      } else if (window.lang === 'en') {
        return 3
      } else if (window.lang === 'thai') {
        return 2
      }
    }
  },
  methods: {
    messageChangePage (msgCurrentPageNum) {
      this.status = 'loading'
      this.activeIndex = msgCurrentPageNum
      this.getNotice()
    },
    // 通知提醒接口
    getNotice () {
      this.$ajax.selfInfoList({
        number: 8,
        page: this.activeIndex,
        type: this.type
      }).then((res) => {
        console.log(res)
        if (res.code === 200) {
          if (res.data.content.length !== 0) {
            this.contents = res.data.content
            this.pageNum = res.data.page_count
            this.total = res.data.item_count
            this.status = 'complete'
          } else {
            this.status = 'null'
          }
          document.documentElement.scrollTop = 160
          document.body.scrollTop = 160
        } else if (res.code === 202) {
          this.status = 'null'
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      })
    }
  },
  created () {
    this.getNotice()
    delCookie('unreadMsg')
    let username = getCookie('username')
    let profile = getCookie('profile')
    let unreadMsg = ''
    this.$store.commit('updateLoginUser', {
      username,
      profile,
      unreadMsg
    })
  }
}
</script>

<style scoped>
.loading {
  margin-top: 160px;
}

.item {
	padding: 40px 0;
	border-bottom: 1px solid #e6e6e6;
	position: relative;
}

.item:last-of-type {
	border-bottom: none;
}

.title {
	height: 25px;
	line-height: 25px;
	color: #333;
	font-size: 18px;
}

.detail {
	color: #666;
	font-size: 14px;
	line-height: 26px;
  width: 645px;
  display: inline-block;
}
.activity-item-link {
	color: #ff600a;
	font-size: 14px;
}

.time {
  float: right;
  margin-top: 3px;
	font-size: 14px;
	color: #a5a5a5;
}

.personal-activity-null {
  padding: 100px 0 398px;
}

.personal-activity-null-illustration {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background: url(../../../assets/images/personal/illustration_message.png) no-repeat center;
}

.personal-activity-null-text {
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-top: 10px;
}
</style>
